<template>
    <div class="container">
        <header>
            <!-- 使用 name 属性指定插槽的名称 -->
            <slot name="header">
                <!-- 备用内容(Fallback Content) -->
                HEADER
            </slot>
        </header>
        <main>
            <!-- 未通过name属性显式设置名称的插槽其名称是 default -->
            <slot>
                <!-- 备用内容(Fallback Content) -->
                MAIN
            </slot>
        </main>
        <footer>
            <slot name="container-footer">
                <!-- 备用内容(Fallback Content) -->
                FOOTER
            </slot>
        </footer>
    </div>
</template>

<script>
export default {
    name: 'Layout'
}
</script>

<style scoped>
.container {
    margin: 15px ;
    border: 1px solid green ;
}

.container>* {
    margin: 15px ;
    border: 1px solid gray ;
}
</style>